<template>
  <div class="navContainer">
    <div class="itemnav">精选</div>

    <div class="nav-content">
      <!--大图与文字-->
      <div class="nav-imgs">
        <span>攻略</span>
        <img
          src="https://youimg1.c-ctrip.com/target//fd/tg/g2/M05/EC/6A/Cghzf1WGJ8eAZnfWAATN8BNn1QQ549_C_300_200_Q90.jpg"
          alt=""/>
        <div class="nav-p-title">
          <p>完爆日本樱花，国内春天即将"提档"上线</p>
          <p>国内这片因杨幂赵又廷大火的秘境即将美出新高度！杨幂赵又廷大火</p>
        </div>
      </div>
      <!--小图与文字-->
      <div class="nav-little-img clearfix">
        <img src="https://dimg04.c-ctrip.com/images/300h0u000000j05rnD96B_C_300_200.jpg" alt="">
        <div class="little-img-right">
          <P>泰热情，泰有趣丨跟着我们杭州+西塘+乌镇3日2晚跟团游(3钻)</P>
          <P>『西游记·情迷四西·买即送』纯玩0购物 千人出游 质保无忧 懒人出游 下午出发 夜游乌镇 情迷西塘 升乌镇本帮宴 1车1导 即日起报名每订单赠精美礼品 放心选购 车次自选 动车高铁游</P>
          <div class="img-right-bottom"><span>海岛</span> <span>$300起</span></div>
        </div>

      </div>
      <div class="nav-little-img clearfix">
        <img src="https://dimg04.c-ctrip.com/images/300h0u000000j05rnD96B_C_300_200.jpg" alt="">
        <div class="little-img-right">
          <P>泰热情，泰有趣丨跟着我们杭州+西塘+乌镇3日2晚跟团游(3钻)</P>
          <P>『西游记·情迷四西·买即送』纯玩0购物 千人出游 质保无忧 懒人出游 下午出发 夜游乌镇 情迷西塘 升乌镇本帮宴 1车1导 即日起报名每订单赠精美礼品 放心选购 车次自选 动车高铁游</P>
          <div class="img-right-bottom"><span>海岛</span> <span>$300起</span></div>
        </div>

      </div>
      <div class="nav-little-img clearfix">
        <img src="https://dimg04.c-ctrip.com/images/300h0u000000j05rnD96B_C_300_200.jpg" alt="">
        <div class="little-img-right">
          <P>泰热情，泰有趣丨跟着我们杭州+西塘+乌镇3日2晚跟团游(3钻)</P>
          <P>『西游记·情迷四西·买即送』纯玩0购物 千人出游 质保无忧 懒人出游 下午出发 夜游乌镇 情迷西塘 升乌镇本帮宴 1车1导 即日起报名每订单赠精美礼品 放心选购 车次自选 动车高铁游</P>
          <div class="img-right-bottom"><span>海岛</span> <span>$300起</span></div>
        </div>

      </div>
      <div class="nav-little-img clearfix">
        <img src="https://dimg04.c-ctrip.com/images/300h0u000000j05rnD96B_C_300_200.jpg" alt="">
        <div class="little-img-right">
          <P>泰热情，泰有趣丨跟着我们杭州+西塘+乌镇3日2晚跟团游(3钻)</P>
          <P>『西游记·情迷四西·买即送』纯玩0购物 千人出游 质保无忧 懒人出游 下午出发 夜游乌镇 情迷西塘 升乌镇本帮宴 1车1导 即日起报名每订单赠精美礼品 放心选购 车次自选 动车高铁游</P>
          <div class="img-right-bottom"><span>海岛</span> <span>$300起</span></div>
        </div>

      </div>
      <div class="nav-little-img clearfix">
        <img src="https://dimg04.c-ctrip.com/images/300h0u000000j05rnD96B_C_300_200.jpg" alt="">
        <div class="little-img-right">
          <P>泰热情，泰有趣丨跟着我们杭州+西塘+乌镇3日2晚跟团游(3钻)</P>
          <P>『西游记·情迷四西·买即送』纯玩0购物 千人出游 质保无忧 懒人出游 下午出发 夜游乌镇 情迷西塘 升乌镇本帮宴 1车1导 即日起报名每订单赠精美礼品 放心选购 车次自选 动车高铁游</P>
          <div class="img-right-bottom"><span>海岛</span> <span>$300起</span></div>
        </div>

      </div>
      <div class="nav-little-img clearfix">
        <img src="https://dimg04.c-ctrip.com/images/300h0u000000j05rnD96B_C_300_200.jpg" alt="">
        <div class="little-img-right">
          <P>泰热情，泰有趣丨跟着我们杭州+西塘+乌镇3日2晚跟团游(3钻)</P>
          <P>『西游记·情迷四西·买即送』纯玩0购物 千人出游 质保无忧 懒人出游 下午出发 夜游乌镇 情迷西塘 升乌镇本帮宴 1车1导 即日起报名每订单赠精美礼品 放心选购 车次自选 动车高铁游</P>
          <div class="img-right-bottom"><span>海岛</span> <span>$300起</span></div>
        </div>

      </div>
      <div class="nav-little-img clearfix">
        <img src="https://dimg04.c-ctrip.com/images/300h0u000000j05rnD96B_C_300_200.jpg" alt="">
        <div class="little-img-right">
          <P>泰热情，泰有趣丨跟着我们杭州+西塘+乌镇3日2晚跟团游(3钻)</P>
          <P>『西游记·情迷四西·买即送』纯玩0购物 千人出游 质保无忧 懒人出游 下午出发 夜游乌镇 情迷西塘 升乌镇本帮宴 1车1导 即日起报名每订单赠精美礼品 放心选购 车次自选 动车高铁游</P>
          <div class="img-right-bottom"><span>海岛</span> <span>$300起</span></div>
        </div>

      </div>
      <div class="nav-little-img clearfix">
        <img src="https://dimg04.c-ctrip.com/images/300h0u000000j05rnD96B_C_300_200.jpg" alt="">
        <div class="little-img-right">
          <P>泰热情，泰有趣丨跟着我们杭州+西塘+乌镇3日2晚跟团游(3钻)</P>
          <P>『西游记·情迷四西·买即送』纯玩0购物 千人出游 质保无忧 懒人出游 下午出发 夜游乌镇 情迷西塘 升乌镇本帮宴 1车1导 即日起报名每订单赠精美礼品 放心选购 车次自选 动车高铁游</P>
          <div class="img-right-bottom"><span>海岛</span> <span>$300起</span></div>
        </div>

      </div>

    </div>


  </div>

</template>

<script>
  export default {
    name: "Homenav",
    props: [],
    components: {},
    data() {
      return {}
    },
    methods: {},
    mounted: function () {
    },
    watch: {},
    computed: {},
    filters: {},
  }
</script>

<style lang="less" scoped>
  @import "../../../assets/css/index.less";

  .navContainer {
    box-sizing: border-box;
    width: @width;
    background-color: @headerbackgroundColor;
    margin: 0.26rem 0;
    font-size: @headerFontSize;
    padding: @headerpadding;
  }

  .itemnav {
    width: 100%;
    height: 1rem;
    line-height: 1rem;
    font-size: 0.45rem;
    margin-bottom: 0.5rem;
  }

  .nav-content {
  }

  .nav-content .nav-imgs {
    width: 100%;
    height: 3.733rem;
    background-color: red;
    position: relative;
  }

  .nav-imgs img {
    width: 100%;
    height: 3.733rem;
    border-radius: 0.15rem;
    position: absolute;
    left: 0;
    top: 0;
  }

  .nav-imgs span {
    position: absolute;
    left: 0.3rem;
    top: 0;
    z-index: 1;
    padding: 0.1rem;
    border-radius: 0 0 0.15rem 0.15rem;
    background-color: #222;
    font-size: 0.25rem;
    color: @headerbackgroundColor;
  }

  .nav-imgs .nav-p-title {
    position: absolute;
    left: 0;
    bottom: 0.5rem;
    text-align: center;
    font-size: 0.5rem;
    width: 100%;
    color: @headerbackgroundColor;
  }

  .nav-p-title p:nth-of-type(1) {

  }

  .nav-p-title p:nth-of-type(2) {
    font-size: 0.3rem;
    .whiteSpace();
  }

  .nav-little-img {
    width: 100%;
    height: 3.0rem;
    margin-top: 0.4rem;
    border-bottom: 0.02rem solid #ccc;
  }

  .nav-little-img img {
    width: 44%;
    height: 2.666rem;
    float: left;
    margin-right: 2%;
  }

  .nav-little-img .little-img-right {
    float: left;
    width: 54%;
    height: 2.666rem;
    position: relative;
  }

  .little-img-right p:nth-of-type(1) {
    .line-clamp();
    font-weight: bold;
    margin-bottom: 0.1rem;
  }

  .little-img-right p:nth-of-type(2) {
    .whiteSpace();
  }

  .little-img-right .img-right-bottom {
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: space-between;
  }

  .img-right-bottom span:nth-of-type(2) {
    color: red;
  }

</style>
